<template>
    <el-select v-model="tenant" placeholder="请选择空间" @change="handleChange">
        <el-option
            v-for="item in tenantList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
        />
    </el-select>
</template>

<script setup>
import { ref, onMounted, defineEmits, watch, defineProps } from 'vue';
import { useStore } from 'vuex';

const store = useStore();

const emit = defineEmits(['update:value']);

const props = defineProps({
    value: {
        type: String,
        default: ''
    }
});

const tenant = ref('');

const tenantList = ref(props.value);

// 获取空间数据
function getTenantList () {
    store.dispatch('proxyAction', {
        name: 'tenantAllList'
    }).then((res) => {
        res.data = res.data || [];
        tenantList.value = res.data.map(item => {
            return {
                label: item.tenantName,
                value: item.tenant
            }
        })
    }).finally(() => {
    })
}

function handleChange (val) {
    emit('update:value', val);
}

onMounted(() => {
    getTenantList();
});

watch(() => props.value, (newVal) => {
    if (newVal !== tenant.value) {
        tenant.value = props.value;
    }
});
</script>